<template>
   <li>
    <div class="left">
      <img :src="item.poster" alt="" />
    </div>

    <div class="middle">
      <p>
        <span class="name">{{ item.name }}</span>
        <span class="dimension">{{ item.item.name }}</span>
      </p>
      <p>
        观众评分
        <span class="grade">{{ item.grade }}</span>
      </p>
      <p>  
        <span class="actors">
          主演：{{ item.actors.map((actor) => actor.name).join(" ") }}
        </span>
      </p>
      <p>{{ item.nation }} | {{ item.runtime }}分钟</p>
    </div>

    <div class="right">
      <button class="ticket">预购</button>
    </div>
  </li>
</template>

<script>
    export default {
        /*定义父组件注入的props */
        props:["item"]
    }
</script>

<style lang="scss" scoped>
@import "../../assets/variable.scss";
li {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 10px;
  font-size: 13px;
  color: #888;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 66px;
    }
  }

  .middle {
    display: flex;
    flex-direction: column;
    justify-content: center;

    flex-grow: 1;
    margin-left: 10px;

    p {
      margin-bottom: 2px;
    }

    span.name {
      font-size: 16px;
      color: #333;
    }

    span.dimension {
      background-color: #ccc;
      color: white;
      border-radius: 2px;
      margin-left: 5px;
      padding: 0 2px;
      font-size: 12px;
    }

    span.grade {
      color: $myOrange;
    }

    span.actors {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 14rem;
    }
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;

    button {
      width: 50px;
      background-color: white;
      color: $myOrange;
      border: 1px solid $myOrange;
      padding: 3px 5px;
      border-radius: 2px;
      font-size: 13px;
    }
  }
}
</style>